<template>
    <a-drawer
            title="新增素材"
            width="520"
            :closable="false"
            :visible="visible"
            @close="onClose"
    >
        <a-form-model
                ref="ruleForm"
                :model="form"
                :rules="rules"
                :label-col="labelCol"
                :wrapper-col="wrapperCol"
        >
            <a-form-model-item ref="name" label="名称" prop="name">
                <a-input
                        placeholder="请输入名称"
                        v-model="form.name"
                        @blur="
              () => {
                $refs.name.onFieldBlur();
              }
            "
                />
            </a-form-model-item>
            <a-form-model-item label="类型" prop="type">
                <a-radio-group v-model="form.type">
                    <a-radio value="imgs">
                        图片组
                    </a-radio>
                    <a-radio value="video">
                        视频
                    </a-radio>
                </a-radio-group>
            </a-form-model-item>
            <a-form-model-item label="用途" prop="purpose">
                <a-radio-group v-model="form.purpose">
                    <a-radio value="1">
                        公益
                    </a-radio>
                    <a-radio value="2">
                        宣传
                    </a-radio>
                    <a-radio value="3">
                        广告
                    </a-radio>
                </a-radio-group>
            </a-form-model-item>
            <a-form-model-item  label="广告公司" prop="Adfirm">
                <a-input
                        placeholder="请输入广告公司名称"
                        v-model="form.name"
                />
            </a-form-model-item>
            <a-form-model-item label="备注" prop="remarks">
                <a-input v-model="form.desc" type="textarea" placeholder="请输入备注说明"/>
            </a-form-model-item>
            <a-form-model-item label="素材" prop="files">
                <a-upload
                        :default-file-list="form.files"
                >
                    <a-button> <a-icon type="upload" /> 上传素材 </a-button>
                </a-upload>
            </a-form-model-item>
        </a-form-model>
        <div class="drawer-bottom">
            <a-button style="marginRight: 8px" @click="onClose">
                Cancel
            </a-button>
            <a-button type="primary" @click="onClose">
                Submit
            </a-button>
        </div
               >
    </a-drawer>
</template>

<script>
    export default {
        name: "addForm",
        props: {
            visible: {
                type: Boolean,
                required: false,
                default: false
            },
        },
        data() {
            return {
                labelCol: { span: 4 },
                wrapperCol: { span: 14 },
                other: '',
                form: {
                    name: '',
                    type:'',
                    purpose: '',
                    Adfirm: '',
                    remarks: '',
                    files: []
                },
                rules: {
                    name: [
                        { required: true, message: '请输入名称', trigger: 'blur' },
                        { min: 3, max: 5, message: '长度在3-5个字符', trigger: 'blur' },
                    ],
                    type: [
                        { required: true, message: '请选择类型', trigger: 'change' },
                    ],
                    purpose: [
                        { required: true, message: '请选择用途', trigger: 'change' },
                    ],
                },
            };
        },
        methods: {
            onClose() {
                this.$emit('closeForm',false)
                this.visible = false
            }
        },
    }
</script>

<style lang="less">
    .side-form{
        min-height: 100%;
        background-color: @base-bg-color;
        padding: 24px;
        font-size: 14px;
        line-height: 1.5;
        word-wrap: break-word;
        position: relative;
        width: 500px;
    }
</style>
